<template>
  <div :class="['flex gap-3', mine ? 'justify-end' : 'justify-start']">
    <div v-if="!mine" class="w-8 h-8 rounded-full overflow-hidden mt-1">
      <img :src="avatar" class="w-full h-full object-cover" />
    </div>
    <div :class="['max-w-[90%] rounded-2xl p-3 text-sm leading-6 break-words whitespace-pre-wrap', mine ? 'bg-[#635BFF] text-white' : 'bg-white border border-gray-200 text-gray-800 shadow-sm']">
      <slot />
    </div>
    <div v-if="mine" class="w-8 h-8 rounded-full overflow-hidden mt-1">
      <img :src="avatar" class="w-full h-full object-cover" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{ mine?: boolean; avatar: string }>()
</script>


